<template>
    <view class="outer-container">
        <swiper vertical :style="{ height }" @change="outerChange" duration="150" :current="outerCurrent" :disable-touch="disableTouch">
            <template v-for="(arr, i) in list">
                <swiper-item>
                    <view class="swiper-item-inner-box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
                        <swiper :style="{ height }" :current="arr.current" circular @change="change($event, i)">
                            <template v-for="item in arr.children">
                                <swiper-item>
                                    <img-cache :src="item.src" width="100%" :height="height" mode="aspectFill" @click="router(item)"></img-cache>
                                </swiper-item>
                            </template>
                        </swiper>
                        <view class="tool-bar" v-if="showToolBar">
                            <view @click="prePage(i)">
                                <text class="icon">&#xe685;</text>
                                <text class="u-margin-left-20">上一页</text>
                            </view>
                            <view>{{ arr.current + 1 + ' / ' + arr.children.length }}</view>
                            <view @click="nextPage(i)">
                                <text class="u-margin-right-20">下一页</text>
                                <text class="icon">&#xe688;</text>
                            </view>
                        </view>
                    </view>
                </swiper-item>
            </template>
        </swiper>
        <!-- 滚动点 -->
        <view class="pots">
            <template v-for="(item, index) in list.length">
                <view class="pot-items">{{ outerCurrent == index ? '●' : '○' }}</view>
            </template>
        </view>
    </view>
</template>

<script lang="ts" setup>
import global from '@/config/index'
import imgCache from '@/components/img-cache/img-cache.vue'
import { computed, inject, ref } from 'vue'

const ins = inject<any>('data')

const list = ref<Array<any>>([])
const outerCurrent = ref(0)
const showToolBar = ref(false)
const disableTouch = ref(false)
const start = ref<any>({})

/** 整屏高度 = 屏幕高度 - 状态栏高度 - 导航栏高度66px - 安全区底部高度 - tabbar高度 */
const height = computed(() => {
    let sys: any = uni.getSystemInfoSync()
    return sys.screenHeight - sys.statusBarHeight - 66 - sys.safeAreaInsets.bottom - 50 + 'px'
})

setTimeout(() => {
    showToolBar.value = true
}, 200)

let arr: Array<any> = []
ins.list.forEach((item: any) => {
    arr.push({
        current: 0,
        children: item.images.map((m: any) => {
            return {
                src: `${global.productImageUrl}${m.image}/0`,
                url: m.url
            }
        })
    })
})
list.value = arr

function prePage(i: number) {
    list.value[i].current--
    if (list.value[i].current < 0) {
        list.value[i].current = list.value[i].children.length - 1
    }
}

function nextPage(i: number) {
    list.value[i].current++
    if (list.value[i].current > list.value[i].children.length - 1) {
        list.value[i].current = 0
    }
}

/** 内测轮播  横向 */
function change(e: any, i: number) {
    list.value[i].current = e.detail.current
}

/** 外侧轮播 竖向*/
function outerChange(e: any) {
    outerCurrent.value = e.detail.current
    showToolBar.value = false
    setTimeout(() => {
        showToolBar.value = true
    }, 200)
    // 禁用滑动
    if (outerCurrent.value == list.value.length - 1) {
        disableTouch.value = true
    }
}

function touchstart(e: any) {
    if (outerCurrent.value == list.value.length - 1) {
        // 需要判断 滑动方向
        start.value = e.changedTouches[0]
    }
}
function touchend(e: any) {
    if (outerCurrent.value == list.value.length - 1) {
        if (e.changedTouches[0].pageY - start.value.pageY > 50) {
            disableTouch.value = false
            outerCurrent.value = list.value.length - 2
        }
    }
}

function router({ url }: { url: any }) {
    let { urlId, urlType, urlString } = url
    uni.$u.$util.jumpByUrlType(urlId, urlType, urlString)
}

function touchmove() {}
</script>

<style lang="scss" scoped>
.swiper-item-inner-box {
    width: 100vw;
    position: relative;

    .tool-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        width: 100vw;
        bottom: 0;
        padding: 30rpx;
        color: white;
        background: linear-gradient(to bottom, rgba(1, 1, 1, 0), rgba(1, 1, 1, 0.4));
    }
}
.outer-container {
    position: relative;
    .pots {
        position: absolute;
        left: 30rpx;
        top: 0;
        bottom: 0;
        width: 50rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: white;
        font-size: 20rpx;
    }
}
</style>
